<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<style>
  /* #container {
  display: grid;
  grid-gap: 1em;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr) ) ;
} */

#container > div {
  background-color: skyblue;
  min-height: 100px;
  border:1px solid #fff;
  box-sizing: border-box;
}
.container {
      display: grid;
      grid-template-columns: repeat(4, 20%);
      grid-row-gap: 0.5em;
      /* grid-column-gap: 20px; */

    }
.container div:first-child{

  /* grid-column: 1/3;
  grid-row: 1; */
}
</style>
<body>


    <div id="container" class="container" :style="setWidth">

        <div v-for="(item,index) in dataColRol" :style="setDiv(item.gridRow,item.gridColumn)">
                {{index}} clo:{{item.col}} sum:{{item.sum}} row:{{item.row}}
        </div>

    </div>


<script>
new Vue({
  el: '#container',
  data: {
    col:4,
    rowIndex:0,
    list: [
      {
        col:2,
		row:2,
        title:'ceshi'
      },
      {
        col:2,
        title:'ceshi'
      },
      {
        col:2,
        title:'ceshi'
      },
      {
        col:2,
        title:'ceshi'
      },
      {
        col:1,
        title:'ceshi'
      },
      {
        col:1,
        title:'ceshi'
      },
      {
        col:2,
        title:'ceshi'
      },
      {
        col:1,
        title:'ceshi'
      },
      {
        col:1,
        title:'ceshi'
      }
    ]
  },
  computed: {
    // 计算属性的 getter
    dataColRol:function(){
         let gridDate={
                rowSpan:{
                  x:'',
                  y:''
                },
                colSpan:{
                  x:'',
                  y:''
                },
                sumRow:1,
                list:[]
         };
         let xrow=[1];
         this.list.forEach((item,index)=>{
           let col=this.col;

           let [xRes,yRes]=[1,1];
           let [xCes,yCes]=[1,1];
           let sum=index>0 ? this.list[index-1].sum+item.col :item.col;
           if(index>0){
             item.row=item.row || 1;
             xCes=this.list[index-1].gridColumn.y+item.col-1>col ? 1:this.list[index-1].gridColumn.y;
             yCes=Number(xCes)+item.col;
             xRes=gridDate.sumRow;

             if(this.list[index-1].gridColumn.y+item.col-1>col){
              xrow.push(1);
              let sumRow=xrow.reduce((x,y)=>{return x+y});
              xRes=sumRow;
              gridDate.sumRow=sumRow;


               if(gridDate.rowSpan.x<sumRow && sumRow<gridDate.rowSpan.y){
                console.log(gridDate.rowSpan,'sumRow',sumRow)

                yRes=Number(xRes)+item.row+1;
                  if(gridDate.colSpan.y+1>yCes){
                    xCes=gridDate.colSpan.y+xCes-1;
                    yCes=gridDate.colSpan.y+yCes-1;

                      //console.log(xCes,yCes);
                  }else{
                    //console.log(xCes,yCes);
                  }
                 console.log(item)

               }
               

                // if(){

                // }
             }
             
           }else{
             yCes=Number(xCes)+item.col;
             yRes=Number(gridDate.sumRow)+item.row;

           }

           item.gridRow={
             x:xRes,
             y:xRes+item.row
           };
           item.gridColumn={
             x:xCes,
             y:yCes
           };
          // console.log(index,item.gridRow);

           if(item.row>1){
             gridDate.rowSpan=item.gridRow;
             gridDate.colSpan=item.gridColumn;
           }


         });



         return this.list;
    },
    setDiv:function(){
      return function(gridRow,gridColumn){
        console.log(gridRow);
        return ` grid-column:${gridColumn.x}/${gridColumn.y};grid-row:${gridRow.x}/${gridRow.y};`;

        //return ` grid-column:${gridColumn.x}/${gridColumn.y};grid-row:${gridRow.x}/${gridRow.y};`;


      };
    // return ` grid-column: 1;grid-row: 1 / 3;`
    },
    setWidth: function () {

      // `this` 指向 vm 实例
      let columns=Number(this.col) || 2;
      return `grid-template-columns: repeat(${columns}, ${100/columns}%)`;
    }
  }
})
</script>
</body>
</html>
